<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <!-- 查询 -->
            <div class="query">
                <el-form :inline="true" :model="queryCourse" class="demo-form-inline">
                    <el-form-item label="课程名">
                        <el-input v-model="queryCourse.name" placeholder="课程名"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="上课时间">
                        <el-input v-model="queryCourse.user" placeholder="上课时间"></el-input>
                    </el-form-item> -->

                    <el-form-item>
                        <el-button type="primary" @click="queryCourse">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="课程名" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.course }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="上课时间" width="200">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span>{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="上课内容" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.content }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="学生课堂表现" width="400">
                    <template slot-scope="scope">
                        <span>{{ scope.row.performance }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="Pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-size="20" layout="total, prev, pager, next" :total="count">
                </el-pagination>
            </div>
            <el-dialog title="修改课程信息" v-model="dialogFormVisible">
                <el-form :model="selectTable">
                    <el-form-item label="课程名称" label-width="100px">
                        <el-input v-model="selectTable.course" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="上课内容" label-width="100px">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="上课时间" label-width="100px">
                        <el-input v-model="selectTable.description"></el-input>
                    </el-form-item>

                    <el-form-item label="学生课堂表现" label-width="100px">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
                        </el-input>
                    </el-form-item>
                    <!-- <el-form-item label="课堂资料" label-width="100px">
                        <el-upload class="avatar-uploader" :action="baseUrl + '/v1/addimg/food'" :show-file-list="false"
                            :on-success="handleServiceAvatarScucess" :before-upload="beforeAvatarUpload">
                            <img v-if="selectTable.image_path" :src="baseImgPath + selectTable.image_path" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item> -->
                </el-form>

                <!-- <el-row style="overflow: auto; text-align: center;">
                    <el-table :data="specs" style="margin-bottom: 20px;" :row-class-name="tableRowClassName">
                                <el-table-column prop="specs" label="规格">
                                </el-table-column>
                                <el-table-column prop="packing_fee" label="包装费">
                                </el-table-column>
                                <el-table-column prop="price" label="价格">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button size="small" type="danger" @click="deleteSpecs(scope.$index)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-button type="primary" @click="specsFormVisible = true" style="margin-bottom: 10px;">添加规格</el-button>
                </el-row> -->
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateFood">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
import headTop from '../components/headTop'
import { baseUrl, baseImgPath } from '@/config/env'
import { getFoods, getFoodsCount, getMenu, updateFood, deleteFood, getResturantDetail, getMenuById } from '@/api/getData'
export default {
    data() {
        return {
            limit: 20,
            count: 0,
            tableData: [
                {
                    course: 'Java',
                    time: '9:00',
                    content: 'www.12345.com',
                    performance: '张三....'
                },
                {
                    course: 'Java',
                    time: '9:00',
                    content: 'www.12345.com',
                    performance: '李四.....'
                },
                {
                    course: 'JavaScript',
                    time: '14:00',
                    content: 'www.1111.com',
                    performance: '王五.....'
                }

            ],
            queryCourse: {},
            currentPage: 1,
            selectTable: {},
            dialogFormVisible: false,
            menuOptions: [],
            selectMenu: {},
            selectIndex: null,

            specsFormVisible: false,
            expendRow: [],
        }
    },
    created() {
        console.log("#####################################");
        // this.restaurant_id = this.$route.query.restaurant_id;
        // this.pageSelect(1, 5);
        // this.initData();
    },
    computed: {
        specs: function () {
            let specs = [];
            if (this.selectTable.specfoods) {
                this.selectTable.specfoods.forEach(item => {
                    specs.push({
                        specs: item.specs_name,
                        packing_fee: item.packing_fee,
                        price: item.price,
                    })
                })
            }
            return specs
        }
    },
    components: {
        headTop,
    },
    methods: {
        queryCourse() { },
        // 分页查询课程
        pageSelect(current, limit) {
            console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@');
            axios.post(`http://114.116.52.2:8008/course/selectCourse/${current}/${limit}`, this.queryCourse).then(res => {
                this.studentList = res.data.rows;
                this.total = res.data.total;
                console.log(res.data);
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.offset = (val - 1) * this.limit;
            // this.getFoods()
        },
        // expand(row, status) {
        //     if (status) {
        //         this.getSelectItemData(row)
        //     } else {
        //         const index = this.expendRow.indexOf(row.index);
        //         this.expendRow.splice(index, 1)
        //     }
        // },
        handleEdit(row) {
            this.getSelectItemData(row, 'edit')
            this.dialogFormVisible = true;
        },
        async getSelectItemData(row, type) {

        },
        handleSelect(index) {
            this.selectIndex = index;
            this.selectMenu = this.menuOptions[index];
        },
        handleDelete(index, row) {

        },
        handleServiceAvatarScucess(res, file) {
            if (res.status == 1) {
                this.selectTable.image_path = res.image_path;
            } else {
                this.$message.error('上传图片失败！');
            }
        },
        beforeAvatarUpload(file) {
            const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isRightType) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isRightType && isLt2M;
        },
        updateFood() { },
        // async updateFood() {
        //     this.dialogFormVisible = false;
        //     try {
        //         const subData = { new_category_id: this.selectMenu.value, specs: this.specs };
        //         const postData = { ...this.selectTable, ...subData };
        //         const res = await updateFood(postData)
        //         if (res.status == 1) {
        //             this.$message({
        //                 type: 'success',
        //                 message: '更新食品信息成功'
        //             });
        //             this.getFoods();
        //         } else {
        //             this.$message({
        //                 type: 'error',
        //                 message: res.message
        //             });
        //         }
        //     } catch (err) {
        //         console.log('更新餐馆信息失败', err);
        //     }
        // },
    },
}
</script>

<style lang="less" >
@import '../style/mixin';
@import '../style/common.less';

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.table_container {
    padding: 20px;
}

.Pagination {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}

.el-table .cell {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}


.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}
</style>
